<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
    <a-form ref="formRef" :model="formState" layout="vertical" :rules="LEVEL_EDIT.RULES">

      <a-row :gutter="[12,12]">
        <a-col :span="8">
          <a-form-item label="等级规则序号" field="code" tooltip="序号值越大 表示级别越高">
            <a-input-number v-model="formState.code" :min="0" allow-clear placeholder="请填写等级规则代码" :disabled="isUpdate"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="等级规则名称" field="name">
            <a-input v-model="formState.name" allow-clear placeholder="请填等级规则名称"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="前端别名" field="nickName">
            <a-input v-model="formState.nickName" allow-clear placeholder="请填前端别名"/>
          </a-form-item>
        </a-col>





        <a-col :span="24">
          <a-form-item label="等级规则描述" field="description">
            <a-textarea v-model="formState.description" allow-clear placeholder="请填等级规则描述"/>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item field="icon"   label="等级图标">
            <a-space>
              <smart-upload-image v-model="formState.icon" :limit="1"/>
            </a-space>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="introduceImg"   label="等级介绍图">
            <a-space>
              <smart-upload-image v-model="formState.introduceImg" :limit="1"/>
            </a-space>
          </a-form-item>
        </a-col>

        <a-divider :orientation="'left'">等级权益规则</a-divider>


        <a-col :span="24">
          <a-form-item label="升级规则" field="rule.upRts">
            <a-space>
              <span>所有邀请的用户累计认养</span>
              <a-input-number v-model="formState.rule.upRts" :min="1" :max="999999" allow-clear   style="width: 100px"/>
              <span>头猪猪后,玩家自动升级到下一个代理级别</span>
            </a-space>
          </a-form-item>
        </a-col>

        <a-col :span="24">
        <a-form-item label="邀请玩家认养奖励规则" field="rule.mzTcBfb">
          <a-space>
            <span>每邀请一个玩家养猪仔时，本级代理可获得玩家认养猪仔时的消额的百分之</span>
            <a-input-number v-model="formState.rule.mzTcBfb" :min="0" :max="100" allow-clear  class="w50"/>
            <span>的佣金奖励</span>
          </a-space>
        </a-form-item>
        </a-col>

        <a-col :span="24">


          <a-form-item    label="日常喂养奖励规则" field="rule.wyTcBfb">
            <a-space>
            <span>玩家在喂养猪仔的过程中,本级代理可以获得喂养时消费金币的百分之</span>
            <a-input-number v-model="formState.rule.wyTcBfb" :min="0" :max="100" allow-clear class="w50" />
            <span>作为佣金奖励</span>
            </a-space>
          </a-form-item>
        </a-col>







      </a-row>


    </a-form>

  </a-drawer>
</template>

<script lang="ts" setup>


import {EditDrawer} from '@/libs/core'
import {LEVEL_EDIT} from "../resource/form";
import {PopBasicHttp} from '../resource/http'


const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])

const {addLevel, updateLevel} = PopBasicHttp
const config = {tplRecord: LEVEL_EDIT.BODY, rawRecord: props.record, rowKey: 'id', emit}


const service = new EditDrawer(config).setAddRequest(addLevel).setUpdateRequest(updateLevel)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '修改等级规则' : '新建等级规则'
</script>

<style lang="css" scoped>

.w50 {
  width: 80px
}
</style>